<template>
  <view class="circle-detail">
    <view class="header" v-if="circleDetail.species_id != null">
      <view class="cover" @click="linkTo(circleDetail.species_id)">
        <img :src="baseUrl + circleDetail.img" alt="" />
      </view>
      <view class="info-box">
        <view class="type" @click="linkTo(circleDetail.species_id)">{{
          circleDetail.type
        }}</view>
        <view class="hot"
          ><i class="iconfont icon-hot-fill"></i><span>热度：</span
          ><span>{{ circleDetail.active }}</span></view
        >
      </view>
    </view>

    <view class="main-box">
      <view class="posting-list">
        <PostingItem :itemData='item' v-for="item in postingList" :key="item.posting_id"/>
      </view>
    </view>
  </view>
</template>

<script>
import { queryCircleDetail, queryPostingByCircleId } from "@/api";
import PostingItem from './components/postingItem'
export default {
  data() {
    return {
      circleDetail: {},
      postingList:[],
      baseUrl: "http://172.17.145.161:3000/public/img/",
    };
  },

  components: {PostingItem},

  async mounted() {
    let id = this.$scope.options.id;
    let result = await queryCircleDetail(id);
    let postingResult = await queryPostingByCircleId(id)
    this.circleDetail = result.data[0];
    this.postingList = postingResult.data
  },
};
</script>

<style scoped lang='scss'>
.circle-detail {
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    background: $themeColor4;
    padding: 70rpx 30rpx;
    color: #fff;
    .cover {
      height: 120rpx;
      width: 120rpx;
      img {
        height: 100%;
        width: 100%;
        border-radius: 20rpx;
      }
    }
    .info-box {
      margin-left: 30rpx;
      .type {
        font-size: 34rpx;
      }
      .hot {
        display: flex;
        margin-top: 20rpx;
        font-size: 30rpx;
        align-items: center;
        i {
          color: #e4743c;
        }
      }
    }
  }
}
</style>